<template>
  <div>
    <div class="address">
      <ul>
        <li v-for="(item,index) of addressList" :key="index">
          <p @click="jumpDefault(index)">
            <span style="margin-right:20px">{{item.fullName}}</span>
            <span>{{item.phone}}</span>
          </p>
          <div
            @click="jumpDefault(index)"
            class="address_p"
          >{{item.province}}{{item.city}}{{item.area}}{{item.address}}</div>
          <div class="address_f flex flex-pack-justify">
            <div
              class="address_left flex align-center"
              @click="handleAddress(item.id, item.def)"
              :data-index="index"
            >
              <img
                v-if="item.def"
                style="margin-right: 8px;"
                src="/static/images/store/confirm.png"
                alt
              />
              <img v-else style="margin-right: 8px;" src="/static/images/store/cancel.png" alt />
              <span v-if="item.def" style="font-size:13px;color:rgba(107,107,107,1);">默认地址</span>
              <span v-else style="font-size:13px;color:rgba(107,107,107,1);">设为默认地址</span>
            </div>
            <div class="address_right">
              <!-- 编辑 -->
              <img
                @click="editAdress(item.id)"
                :data-index="index"
                style="margin-right:28px;"
                src="/static/images/store/edit.png"
                alt
              />
              <!-- 删除 -->
              <img
                @click="handleDelete"
                :data-index="index"
                src="/static/images/store/delete.png"
                alt
              />
            </div>
          </div>
        </li>
      </ul>
    </div>

    <!-- 底部新增收货地址 -->
    <div class="footer">
      <button class="btn" @click="handleDetails">新增收货地址</button>
    </div>
  </div>
</template>

<script>
import { getAddress, deleteAddress, getDefault } from "@/api/api";
export default {
  props: {},
  data() {
    return {
      show: true,
      addressList: [],
      id: 0
    };
  },
  computed: {},
  created() {},
  mounted() {
    console.log("this.$root.$mp.query", this.$root.$mp.query.hah);
    this.text = this.$root.$mp.query.hah;
    wx.setNavigationBarTitle({
      title: this.text ? "选择收货地址" : "收货地址"
    });
  },
  onShow() {
    Object.assign(this.$data, this.$options.data());
    this.getAddress();
  },
  watch: {},
  methods: {
    /**
     *
     */
    jumpDefault(index) {
      // wx.setStorageSync('address', this.addressList[index]);
      wx.navigateBack({
        delta: 1
      });
    },
    /**
     * 获取配送地址
     */
    async getAddress() {
      wx.showLoading({
        title: "加载中",
        icon: "none",
        mask: true
      });
      const data = await getAddress();
      wx.hideLoading();
      console.log("添加收货地址", data);
      this.addressList = data;
    },
    /**
     * 删除地址
     *  */
    handleDelete(e) {
      let index = e.currentTarget.dataset.index;
      let _this = this;
      wx.showModal({
        content: "确定删除此地址么？",
        success: function(res) {
          if (res.confirm) {
            // 是
            _this.delete(index);
            // _this.addressList.splice(index, 1);
          }
        }
      });
    },
    async delete(index) {
      await deleteAddress({ id: this.addressList[index].id });
      this.addressList.splice(index, 1);
    },

    /**
     * 编辑地址
     */
    editAdress(index) {
      // 获取点击的标签的 index 值
      // let index = e.currentTarget.dataset.index;
      wx.navigateTo({
        url: `/pages/PersonalCenter/userChildren/address/addAddress/main?index=${index}`
      });
    },
    /**
     * 默认地址
     */
    async handleAddress(index, def) {
      wx.showLoading({
        title: "加载中",
        icon: "none",
        mask: true
      });
      await getDefault({ id: index, def: true });
      wx.hideLoading();
      this.getAddress();

      if (this.text) {
        console.log("1111111111111111111111111");
        wx.navigateBack({
          delta: 1
        });
      }
    },
    /**
     * 跳转到新增收货地址
     */
    handleDetails() {
      wx.navigateTo({
        url: "/pages/PersonalCenter/userChildren/address/addAddress/main"
      });
    }
  },
  components: {}
};
</script>

<style scoped lang="less">
.address {
  padding: 0 15px;
  box-sizing: border-box;
  margin-bottom: 53px;
}

ul {
  li {
    padding: 20px 0px;
    box-sizing: border-box;
    border-bottom: 1px solid #e6e6e6;

    p {
      font-size: 16px;
      font-weight: 700;
      color: rgba(2, 6, 4, 1);
      // height: 30px;
    }

    .address_p {
      font-size: 13px;
      font-weight: 400;
      color: rgba(107, 107, 107, 1);
      // height: 30px;
      padding: 8px 0 12px 0;
    }
  }

  .address_left {
    height: 17px;
  }
  img {
    width: 17px;
    height: 17px;
  }
}

// 底部新增收货地址
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #fff;
  button {
    border-radius: 2px;
    font-size: 15px;
    font-family: PingFangSC-Medium, PingFangSC;
    font-weight: 500;
    line-height: 42px;
    margin: 0 15px 6px;
    background: rgba(24, 119, 152, 1);
    color: rgba(255, 255, 255, 1);
  }
}
</style>
